<template>
	<!-- background-color: #F29100; -->
	<view id="list">
		<block v-for="(item,index) in data" :key="index">
			<view class="list-box">
				<!-- 加阴影 -->
				<view class="list-box-content" style="position: relative;"
					:class="{touch:index==touch,'my-border':border}" @tap="seeActivity(index)"
					@longtap="showCaoZuo=index" @touchstart='touch=index' @touchend='touch=-1'>
					<view style="width: 140rpx;height: 140rpx;border-radius: 20rpx;overflow: hidden;">
						<u-image shape="square" ref="uImage" :width="160" :height="160" :src="item.image"
							mode="aspectFill">
							<u-loading size="44" mode="flower" slot="loading" v-if="false"></u-loading>
							<view v-if="false" slot="error" style="font-size: 24rpx;">加载失败</view>
						</u-image>
					</view>
					<view class="list-box-content-right">
						<view class="title" style="display: flex;justify-content: space-between;align-items: center;
							overflow: hidden;
							-webkit-line-clamp: 1;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;">
							{{item.title}}
						</view>
						<view class="detail">
							{{item.detail}}
						</view>
					</view>

					<view v-if="showCaoZuo==index&&needQuitActivity"
						style="position: absolute;top:0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);border-radius: 20rpx;display: flex;justify-content: space-between;align-items: center;">
						<view></view>
						<view style="margin-right: 20rpx;">
							<view style="margin-bottom: 20rpx;">
								<u-button @click="seeActivity(index)" style="font-size: 32rpx;" shape="circle" size="mini" :ripple="true"
									type="success">查看活动</u-button>
							</view>
							<view>
								<u-button v-if="!isEnd(item.endTime)" :loading="quitActivityLoading"
									@click="quitActivity(item.id)"
									style="font-size: 32rpx;" shape="circle" size="mini" :ripple="true" type="error">
									退出活动</u-button>
								<u-button v-else disabled style="font-size: 32rpx;" shape="circle" size="mini"
									:ripple="true" type="error">即将开始，无法退出</u-button>
							</view>
						</view>
					</view>
				</view>

			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			'data': Array,
			'border': Boolean,
			'userId': Number,
			'needQuitActivity': false
		},
		data() {
			return {
				touch: -1,
				showCaoZuo: -1,
				quitActivityLoading: false,
			}
		},
		methods: {
			seeActivity(index) {
				this.showCaoZuo = -1
				console.log(index)
				this.touch = index
				console.log(this.data[index])
				uni.request({
					url: this.url.club.info + '/' + this.data[index].clubId,
					method: 'GET',
					header: {},
					success: (res) => {
						console.log(res.data.club)
						var club = res.data.club;
						this.touch = -1
						uni.navigateTo({
							url: '/pages/activity/activity-details?activity=' + encodeURIComponent(JSON
								.stringify(this.data[index])) + "&club=" + encodeURIComponent(JSON
								.stringify(club))
						});
					},
					fail: (res) => {
						console.log(res)
					}
				});
			},
			quitActivity(activityId) {
				if (this.needQuitActivity) {
					this.quitActivityLoading = true
					uni.request({
						url: this.url.usermovement.dropout + "/" + this.userId+"/"+activityId,
						method: 'GET',
						header: {},
						success: (res) => {
							this.showCaoZuo=-1;
							this.quitActivityLoading = false
							this.$u.toast('退出活动成功')
							this.$emit("loadMyActivity");
						},
						fail: (res) => {
							this.quitActivityLoading = false
							this.$u.toast('退出活动失败')
							console.log(res)
						}
					});
				}
			},
			//判断时间是否过期
			isEnd(time) {
				var end = new Date(time)
				var now = new Date();
				if (end.getYear() < now.getYear()) {
					return true;
				}
				if (end.getYear() == now.getYear()) {
					if (end.getMonth() < now.getMonth()) {
						return true;
					}
					if (end.getMonth() == now.getMonth()) {
						if (end.getDate() < now.getDate()) {
							return true;
						}
						if (end.getDate() == now.getDate()) {
							//一小时内，不允许退出活动
							if (end.getTime() - now.getTime() < 3600) {
								return true;
							}
						}
					}
				}
				return false;

			}
		}
	}
</script>

<style>
	#list {
		padding-bottom: 20rpx;
	}

	.list-box {
		height: 180rpx;
		width: 100%;
		padding: 20rpx 20rpx 0 20rpx;

	}

	.list-box-content {
		display: flex;
		padding: 10rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		justify-content: center;
		align-items: center;
		transition: all .25s linear;
	}

	.touch {
		background-color: #e4e7ed;
	}

	.list-box-content-right {
		margin: 10rpx 10rpx 0 20rpx;
		width: calc(100% - 200rpx);
	}

	.title {
		font-size: 36rpx;
		font-weight: 800;
		margin-bottom: 10rpx;
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.detail {
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		color: #606266;
	}

	.my-border {
		border: 1px solid #edf0f3;
	}
</style>
